<template>
  <div ref="chartRef" style="width: 100%; height: 100%;" />
</template>
<script setup lang="ts">
import { type PropType, ref, computed, watch } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";

const props = defineProps({
  data: {
    type: Array as PropType<Array<number>>,
    default: { xAxis: [], data: [] }
  },
  color: {
    type: String,
    default: () => []
  }
});
const { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
  theme,
  renderer: "svg"
});
const arroption = ref([]);
const arroptionname = ref([]);
const getinit = () => {
  arroption.value = [];
  arroptionname.value = [];
  if (props.data?.data?.length > 0) {
    props.data.data.forEach((item, index) => {
      arroptionname.value.push(item.name);
      arroption.value.push({
        name: item.name,
        type: "line",
        stack: "Total" + index,
        smooth: true,
        lineStyle: {
          width: 2
        },
        showSymbol: false,
        emphasis: {
          focus: "series"
        },
        data: item.value
      });
    });
    setOptions({
      container: ".cross",
      color: ["#07C7E0", "#5069DA", "#EEBC66"],
      title: {
        text: ""
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            show: false,
            backgroundColor: "#6a795"
          }
        }
      },
      legend: {
        color: ["#5983FE"],
        icon: "circle",
        itemWidth: 10,
        itemHeight: 10, // 改变圆圈大小
        data: arroptionname.value,
        left: 0,
        top: "5%",
        textStyle: {
          color: isDark.value ? "#fff" : "#000"
        }
      },
      grid: {
        left: "0%",
        right: "40px",
        bottom: "0%",
        top: "25%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: props.data.xAxis,
          // axisLine: {
          //   lineStyle: {
          //     color: "#a6adbf"
          //   }
          // },
          axisLine: {
            // 坐标轴 轴线
            show: true, // 是否显示
            // symbol: ["none", "arrow"], // 是否显示轴线箭头
            // symbolSize: [6, 6], // 箭头大小
            // symbolOffset: [0, 7], // 箭头位置
            lineStyle: {
              color: "#a6adbf",
              width: 1,
              type: "solid"
            }
            // axisTick: {
            //   //x轴刻度线
            //   show: false,
            //   alignWithLabel: true
            // }
          },
          axisLabel: { show: true },
          axisTick: {
            //x轴刻度线
            show: true,
            inside: true
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#a6adbf"
            }
          },
          splitNumber: 2,
          splitLine: {
            show: false
          }
        }
      ],
      series: arroption.value
    });
  }
};
watch(
  () => isDark.value,
  () => {
    getinit();
  }
);
watch(
  () => props.data,
  data => {
    getinit();
    // console.log(data, "数据55");
  }
);

getinit();
</script>

<style lang="scss" scoped>
.dians {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ecbc73;
  margin-right: 5px;
  display: inline-block;
  position: relative;
  bottom: 2px;
}
</style>
